<template>
	<view class="page">
		<view class="tit">*请上传图片凭证：</view>
		<view class="">
			<view class="no-img" @click="addImage()" v-if="img_list.length==0">
				<image src="../../static/pagesA-img/images/no-img.png" class="img1"></image>
			</view>
			<view class="img-list" v-if="img_list.length>0">
				<view class="list" v-for="(item,key) in img_list" :key='key'>
					<image :src="item" mode="aspectFit"  @click="showPreviewImg(item)" class="img"></image>
					<text class="close" @click="deleteImg(key)">×</text>
				</view>
				<view class="list" @click="addImage()">
					<image src="../../static/pagesA-img/images/add-img.png" mode="aspectFit" class="img"></image>
					<view class="add-msg">+上传图片 ({{img_list.length}}/5)</view>
				</view>
			</view>
		</view>
		<view class="tit">*请输入总价：</view>
		<view class="money-box">
			<view class="">金额(元) </view>
			<input class="money" @blur="handleInput" type="number"  v-model="order_money"  placeholder="请输入金额"/>
		</view>
		<view class="tit">*支付类型：</view>
		<view class="bgf1">
			<radio-group @change="radioChange">
			    <view>
			        <label class="radio"><radio value="1" color="#859dc2" class="check_radio" name="type" />全款支付</label>
			        <label class="radio"><radio value="2" color="#859dc2"  class="check_radio" name="type" />预付款</label>
			    </view>            
			</radio-group>
		</view>
		<view class="tit">订单备注：</view>
		<textarea class="mark" v-model="order_mark" @blur="blurInput" placeholder="您可以备注客户姓名及联系方式，以便工作人员更快地审核订单！"></textarea>
		<view class="btn-box">
			<button class="btn" @click="getQrcode">提交订单</button>
		</view>
		<view class="msg">提交订单将生成一个支付二维码，客户扫码支付即可！</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[],
				img_list:[],
				order_money:'',
				order_mark:'',
				user_id:'',
				pay_category:'',
			}
		},
		onShow() {
			let self = this;
			// #ifdef H5
			self.$request.wx_config();
			// #endif
		},
		methods: {
			radioChange(evt){
				console.log(evt.target.value)
				this.pay_category = evt.target.value
			},
			getQrcode(){
				var self = this;
				console.log(self.pay_category)
				if(self.imgList.length==0){
					uni.showToast({
					    title: '请上传图片凭证!',
					    duration: 2000,
							icon:"none"
					});
					return false;
				}
				if(self.order_money>0){
					
				}else{
					uni.showToast({
					    title: '金额不能为空且大于0!',
					    duration: 2000,
							icon:"none"
					});
					return false;
				}
				if(self.pay_category==''){
					uni.showToast({
					    title: '请选择支付类型!',
					    duration: 2000,
							icon:"none"
					});
					return false;
				}
				this.$request.request({
					url:'/order/offline/create',
					data:{
						images:self.imgList,
						payments:self.order_money * 100,
						pay_category:self.pay_category,
						remark:self.order_mark
					},
					success:function(res){
						if(res.code==200){
							uni.navigateTo({
							    url: '../qrcode/qrcode?id='+res.result+'&money='+self.order_money
							});
						}else{
							uni.showToast({
							    title: '网络连接错误，请重试!',
							    duration: 2000,
									icon:"none"
							});
						}
					}
				})
				
				
				
			},
			handleInput(e) {
				console.log(e)
				let val = parseFloat(e.target.value) * 100;
				this.order_money = Math.floor(val) / 100 ;
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			blurInput(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			addImage(){
				var self = this;
				if(self.imgList.length<5){
					var count = 5-this.imgList.length;
					uni.chooseImage({
						count:count,
					    success: (chooseImageRes) => {
							console.log(chooseImageRes)
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							if(tempFilePaths.length>count){
								uni.showToast({
								    title: '最多只能选择'+count+'张照片，请重新选择',
								    duration: 2000,
									icon:"none"
								});
								return false;
							}
							tempFilePaths.forEach((item,index)=>{
								uni.uploadFile({
								    url: self.$request.img_upload, //仅为示例，非真实的接口地址
								    filePath: item,
								    name: 'file',
								    formData: {
								        'user': 'test'
								    },
									header: {
										'factory-id': self.$request.factory_id,
										'token': uni.getStorageSync('token') || ""
									},			
								    success: (uploadFileRes) => {
										console.log(uploadFileRes)
										if(JSON.parse(uploadFileRes.data).code==200){
											uni.showLoading({
											    title: '加载中'
											});
											setTimeout(function(){
												uni.hideLoading();
												var img_uri = JSON.parse(uploadFileRes.data).result[0].uri;
												if(img_uri){
													self.img_list.push(item);
													self.imgList.push(JSON.parse(uploadFileRes.data).result[0].uri);
												}else{
													uni.showToast({
													    title: JSON.parse(uploadFileRes.data).result[0].msg,
													    duration: 2000,
														icon:"none"
													});
												}
											},1000)
										}				
								    }
								});
							}); 
					    }
					});
					
					// #ifdef H5
					
					// self.wx.chooseImage({
					//   count: 1, 
					//   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					//   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					//   success: function(res) {
					//     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					//     localIds.forEach(function(e) {
					//       self.wx.uploadImage({
					//         localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
					//         isShowProgressTips: 1, // 默认为1，显示进度提示
					//         success: function(res) {
					//           var serverId = res.serverId; 
					// 		  uni.showLoading({
					// 		      title: '请稍后~'
					// 		  });
					// 		  self.$request.request_config({
					// 		  	url:'/web/wechat/upload_image',
					// 		  	data:{
					// 		  			media_id: serverId,
					// 		  		},						
					// 		  	success:function(res){
					// 		  		if (res.code == 200) {
					// 		  			var img_uri = res.result[0].uri;
					// 		  			if(img_uri){
					// 		  				setTimeout(function() {
					// 		  					uni.hideLoading();
					// 		  					self.img_list.push(img_uri);
					// 		  					self.imgList.push(img_uri);								 
					// 		  				}, 3000);
					// 		  			}else{
					// 		  				uni.showToast({
					// 		  				    title: res.result[0].msg,
					// 		  				    duration: 2000,
					// 		  					icon:"none"
					// 		  				});
					// 		  			}						  
					// 		  		}else{
					// 		  			uni.hideLoading();
					// 		  			}						
					// 		  	}
					// 		  })
					//         }
					//       });
					//     });
					//   }
					// });
					// #endif
				}
				else{
					uni.showToast({
					    title: '最多只能上传五张图片',
							icon:"none",
					    duration: 2000
					});
				}
			},
			showPreviewImg(url){
				uni.previewImage({
					urls:this.img_list,
					current:url
				})
			},
			deleteImg(key){
				this.imgList.splice(key,1);
				this.img_list.splice(key,1);
			},
		}
	}
</script>

<style scoped>
.page{
	width: 750upx;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 30upx 15upx;
	background-color: #efefef;
}
.no-img{
	width: 100%;
	height: 230upx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fafafa;
}
.tit{
	margin-bottom: 10upx;
}
.img1{
	width: 177upx;
	height: 98upx;
}
.img-list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.list{
	position: relative;
	width: 229upx;
	height: 229upx;
	background-color: #fafafa;
	border-radius: 20upx;
	margin-right: 15upx;
	margin-bottom: 20upx;
}
.add-msg{
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	top:100upx;
	font-size: 12px;
}
.list:nth-child(3n){
	margin-right: 0;
}
.img{
	width: 229upx;
	height: 229upx;
}
.money-box{
	width: 100%;
	height: 230upx;
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 20upx;
}
.money{
	width: 100%;
	height: 100upx;
	border: none;
	border-bottom: 1px solid #cccccc;
	text-align: center;
}
.mark{
	width: 100%;
	height: 230upx;
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 20upx;
	font-size: 12px;
}
.bgf1{
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 20upx;
}
.btn-box{
	margin: 50upx 0 50upx 0;
	text-align: center;
}
.btn{
	width: 460upx;
	height: 80upx;
	background-color: #859dc2;
	line-height: 80upx;
	color: #FFFFFF;
	font-size: 14px;
}
.msg{
	text-align: center;
	font-size: 12px;
}
.close{
	position: absolute;
	width: 20px;
	height: 20px;
	right: 5px;
	top:5px;
	border-radius: 50%;
	background-color: #FFFFFF;
	text-align: center;
	line-height: 20px;
}
.radio{
	margin-right: 40upx;
}
.check_radio{
	/* 859dc2 */
	transform:scale(0.7)
}
</style>
